<template>
	<div>
		<van-search v-model="searchValue" @search="handleSearch"></van-search>
		<div v-if="list.length">
			<ListItem v-for="v in list" :key="v.id" :v="v" @click="$router.push('/detail/' + v.id)"></ListItem>
		</div>

		<div v-else>
			<div v-if="searchList.length">
				<h3 :style="{ display: 'flex', justifyContent: 'space-between' }">
					<span>历史记录</span>
					<small @click="store.commit('clearSearchList')">清空</small>
				</h3>

				<van-tag type="primary" class="tag" v-for="(v, i) in searchList" :key="i" @click="handleSearch(v)">{{ v }}
				</van-tag>

			</div>

			<div v-else>
				<h3>
					<span>大家都在搜</span>
				</h3>

				<van-tag type="primary" class="tag">标签</van-tag>
				<van-tag type="primary" class="tag">标签</van-tag>
				<van-tag type="primary" class="tag">标签</van-tag>
				<van-tag type="primary" class="tag">标签</van-tag>
				<van-tag type="primary" class="tag">标签</van-tag>

			</div>
		</div>


	</div>
</template>


<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { RootState, HomeListState } from '@/store'
import ListItem from '@/components/ListItem/ListItem.vue'
import axios from "axios"
// 获取仓库
const store = useStore<RootState>()
// 获取仓库搜索数据
const searchList = computed(() => store.state.searchList)
// 搜索的值
const searchValue = ref('')
// 搜索事件
const handleSearch = async (value: string) => {
	store.commit('addSearchList', value);
	const resp = await axios.get('/api/search', { params: { searchValue: value } })
	list.value = resp.data.data
}

// 数据搜索结果列表
const list = ref<HomeListState[]>([]);

</script>

<style>
.tag {
	margin: 0 4px;
}
</style>